<template>
  <main-layout>
    <!-- 导航区 -->
    <div class="header">
      <img src="../../images/log_1.jpg" alt="" />
      <h3>买只宠物</h3>
      <van-search v-model="value" placeholder="搜宠物" />
      <van-icon name="share-o" />
    </div>
    <div class="content">
      <!-- 标题区 -->
      <div class="items">
        <div class="item">
          <van-icon name="setting" />
          <span>附近</span>
        </div>
        <div class="item">
          <van-icon name="hot" />
          <span>热门</span>
        </div>
        <div class="item">
          <van-icon name="new-arrival" />
          <span>新品</span>
        </div>
        <div class="item">
          <van-icon name="cart" />
          <span>购物车</span>
        </div>
      </div>
      <!-- 轮播区 -->
      <van-swipe :autoplay="3000" width="350px" height="210px">
        <van-swipe-item v-for="it in bannerList" :key="it.id">
          <img v-lazy="it.src" />
        </van-swipe-item>
      </van-swipe>
      <!-- 特惠区 -->
      <div class="pref">
        <div class="top">
          <div class="title">
            <span>特惠专区</span>
            <span>查看全部<van-icon name="arrow" /></span>
          </div>
        </div>
        <div class="cons">
          <div
            class="con con-ref"
            @click="detailEvt(it.id)"
            v-for="it in prefList"
            :key="it.id"
          >
            <img v-lazy="it.src" />
            <div class="t-name">{{ it.title }}</div>
            <div class="price">
              ￥<span>{{ it.price }}</span
              ><span>{{ it.oldPrice }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新上架 -->
      <div class="pref">
        <div class="top">
          <div class="title">
            <span>最新上架</span>
            <span>查看全部<van-icon name="arrow" /></span>
          </div>
        </div>
        <div class="cons">
          <div class="con" v-for="it in newList" :key="it.id">
            <img v-lazy="it.src" />
            <div class="t-name">{{ it.title }}</div>
            <div class="price">
              ￥<span>{{ it.price }}</span
              ><span style="text-decoration: none">{{ it.time }}分钟前</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 精选区 -->
      <div class="pref">
        <div class="top">
          <div class="title">
            <span>优宠精选</span>
            <span>查看全部<van-icon name="arrow" /></span>
          </div>
        </div>
        <div class="cons">
          <div class="con cho-pet" v-for="it in excelList" :key="it.id">
            <img v-lazy="it.src" />
            <div class="t-name">{{ it.title }}</div>
            <div class="price">
              ￥<span>{{ it.price }}</span
              ><span style="text-decoration: none">{{ it.address }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main-layout>
</template>

<script>

import MockService from "../../apis/MockService.js";

export default {
 

  data() {
    return {
      value: "",
      bannerList: [],
      prefList: [],
      newList: [],
      excelList: [],
    };
  },


  created() {
    this.getList();
  },

  methods: {
    // 特惠 --获取数据列表
    async getList() {
      let _result = await MockService.getPrefListApi();
      if (_result.code === 200) {
        this.prefList = _result.data.rows.map((_it) => {
          return _it;
        });
      }

      // banner
      let _resultBanner = await MockService.getbannerListApi();
      if (_resultBanner.code === 200) {
        this.bannerList = _resultBanner.data.rows.map((_it) => {
          return _it;
        });
      }

      // 最新
      let _resultNew = await MockService.getNewListApi();
      if (_resultNew.code === 200) {
        this.newList = _resultNew.data.rows.map((_it) => {
          return _it;
        });
      }

      // 优宠
      let _resultExcel = await MockService.getExcelListApi();
      if (_resultExcel.code === 200) {
        this.excelList = _resultExcel.data.rows.map((_it) => {
          return _it;
        });
      }
    },

    // 详情页传参
    async detailEvt(it) {
      let _result = await MockService.getPrefListApi(it);
      // console.log(_result);
      this.$router.push({
        path: "/detail",
        query: {
          it,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../style/common.less";

.header {
  display: flex;
  height: 50px;
  padding: 10px;
  justify-content: space-evenly;
  align-items: center;
  background-color: #ffd101;
  > img {
    width: 30px;
    margin-right: 8px;
  }
  > .van-search {
    width: 170px;
    height: 35px;
    border-radius: 20px;
    background-color: #f7f8fa;
  }
  > h3 {
    letter-spacing: 5px;
  }
  > i {
    font-size: 20px;
  }
}
.content {
  overflow-y: scroll;
  width: 100%;
  height: calc(100% - 70px);
  background-color: #fff;
  > .items {
    display: flex;
    justify-content: space-around;
    padding: 10px 30px 60px;
    border-radius: 0 0 30px 30px;
    background: #ffd101;
    align-items: center;
    font-size: 14px;
    > .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 30px;
      > i {
        width: 40px;
        height: 40px;
        background: #2b2626ea;
        color: #fff;
        font-size: 25px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
      }
    }
  }

  .van-swipe {
    position: relative;
    height: 120px;
    margin-top: -20px;
    &::before {
      position: absolute;
      top: 12px;
      left: 34px;
      letter-spacing: 8px;
      font-size: 18px;
      color: #000;
      content: "金牌商家";
      z-index: 999;
    }
    &::after {
      position: absolute;
      top: 42px;
      left: 23px;
      color: #7a7369;
      background: #ded1c3;
      padding: 3px 5px;
      font-size: 8px;
      letter-spacing: 3px;
      border-radius: 15px;
      content: "专业繁殖配置保障";
      z-index: 99;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-swipe[data-v-5954443c] {
    height: 120px;
    margin: -52px 15px 0 15px;
    border-radius: 25px;
  }
  .pref {
    padding: 10px 15px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:nth-child(1) {
        font-size: 16px;
        font-weight: 600;
      }
      span:nth-child(2) {
        font-size: 10px;
        color: #666;
      }
    }
    .cons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .con-ref {
        position: relative;
        &::before {
          position: absolute;
          top: 12px;
          left: 6px;
          background-color: rgba(0, 0, 0, 0.541);
          padding: 1px 5px;
          border-radius: 12px;
          color: #ffd101c2;
          font-size: 8px;
          content: "包邮";
        }
      }

      .cho-pet {
        position: relative;
        &::before {
          position: absolute;
          top: 12px;
          right: 15px;
          background-color: #f5ce22e8;
          padding: 1px 5px;
          border-radius: 12px;
          color: #807d7d;
          font-size: 8px;
          content: "优宠";
        }
      }
      .con {
        width: 30%;
        img {
          width: 90px;
          height: 90px;
          margin: 10px 0 8px 0;
          border-radius: 8px;
        }
        .t-name {
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 5px;
        }
        .price {
          color: #f08842;
          font-size: 8px;
          span:nth-child(1) {
            font-size: 14px;
            margin-right: 5px;
          }
          span:nth-child(2) {
            color: #b1b0b0;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>